<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #l-map {
            height: 600px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=SeUxB6PBUamb8yEP3e463NCIivu7PO70">
    </script>


</head>

<body>

    <div id="l-map"></div>

    <script>
        // 1.0 根据一个id=l-map 的容器来实力护额BMap对象，所以应该在页面上定义一个id=l-map 的div来装载地图
        // 注意点：id=l-map 的容器一定要高度，不然看不到地图

        // 2.0 向地图添加控件一定要等地图渲染完成以后才能添加

        var map = new BMap.Map("l-map");
        // centerAndZoom 方法能够根据经纬度信息渲染一个地图，缩放级别是11
        // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野    
        myGeo.getPoint("天河区珠吉路58号津安创意园", function (point) {
            // 根据用户输入的具体地址获取该地址对应的经纬度信息
            // console.log(point);

            if (point) {
                // centerAndZoom 方法能够根据经纬度信息渲染一个地图，缩放级别是16
                map.centerAndZoom(point, 16);
                // 添加一个标记物
                // new BMap.Marker(point) 根据经纬度信息创建一个标记物对象，addOverlay方法将标记物添加到地图上
                map.addOverlay(new BMap.Marker(point));

                // 2.0.1 添加平移缩放控件
                map.addControl(new BMap.NavigationControl());
                // 2.0.2 添加比例尺控件
                map.addControl(new BMap.ScaleControl());

            }
        },
            "广州");



    </script>
</body>

</html>